<script setup lang="ts">
defineOptions({
  name: "PCWSystem"
});
import { ref, computed, onMounted } from "vue";
import modelTitle from "@/views/common/components/modelTitle/index.vue";
import wwtCarousel2 from "@/views/machine/operation/overView/components/wwtCarousel2.vue";
import { queryChildByTypeCodeAndItemValue } from "@/api/waterClass";
import { querySpecValues } from "@/api/machineApi";

interface Props {
  /**  有 title 时传入 */
  title?: string;
  /**  有按钮时传入，传入后会有 btn-click 事件 */
  button?: string;
  /**  模块最低宽度，默认 330px */
  width?: number;
  /**  模块最低高度，默认 200px */
  height?: number;
  /**  是否需要背景阴影，默认为true */
  boxShadow?: boolean;
  /**  是否需要圆角，默认为true */
  borderRidus?: boolean;
  /**  是否暗色，默认为false */
  dark?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  title: "PCW系统",
  dark: false,
  width: 330,
  height: 200,
  boxShadow: false,
  borderRidus: true
});

interface Emits {
  /**  title 右侧按钮点击后触发 */
  (event: "btn-click"): void;
}

const emits = defineEmits<Emits>();

const title_height = computed(() => (props.title ? "38px" : "0px"));
const min_width = computed(() => `${props.width}px`);
const min_height = computed(() => `${props.height}px`);

const autoplay = ref(false);
const pcwPoint = ref("");
const pcwPoints = ref<any>([]);

const clickHandler = () => emits("btn-click");

setTimeout(() => {
  autoplay.value = true;
}, 15000);

const getName = (val, list) => {
  return JSON.parse(list.find(e => e.itemValue === val)?.itemDesc.replace(/[\r|\n|\t]/g, ""))?.name || "";
};

onMounted(async () => {
  const arrValue = ["PCWPVZB003", "PCWPVZB003A", "PCWPVZB003B", "PCWPVZB003C", "PCWPVZB003D"]; // 泵频率
  const response1: any = await queryChildByTypeCodeAndItemValue({
    value: "PCWPVZB",
    typeCode: "MCTS"
  });
  const tempList1 = response1.filter(item => arrValue.includes(item.itemValue));
  const pointLists = tempList1;
  const spclist4 = tempList1.map(item => JSON.parse(item?.itemDesc.replace(/[\r|\n|\t]/g, "")));
  const arr = [];
  spclist4.forEach(element => {
    arr.push(element.point_position);
  });
  const res: any = await querySpecValues([...arr]);
  const resData =
    res.rows && res.rows.length
      ? res
      : {
          innerServiceErrorMsg: null,
          total: 0,
          pageSize: 0,
          currentPageNum: 0,
          totalPage: 0,
          rows: [],
          jsonRows: null
        };
  const dataValue: any = pointLists.map(e => {
    return {
      value:
        resData.rows.find(i => i.point === JSON.parse(e?.itemDesc.replace(/[\r|\n|\t]/g, "")).point_position)?.last_value !== null &&
        resData.rows.find(i => i.point === JSON.parse(e?.itemDesc.replace(/[\r|\n|\t]/g, "")).point_position)?.last_value !== undefined
          ? resData.rows.find(i => i.point === JSON.parse(e?.itemDesc.replace(/[\r|\n|\t]/g, "")).point_position)?.last_value
          : "-",
      ...e,
      name: getName(e.itemValue, pointLists)
    };
  });
  pcwPoints.value = dataValue;
  // pcwPoint.value = dataValue !== null && dataValue !== undefined ? dataValue : "-";
  // pvPoint.value = resData.rows.find(i => i.point === JSON.parse(pointLists.find(e => e.itemValue === "PCWPVZB005")?.itemDesc.replace(/[\r|\n|\t]/g, "")).point_position)?.last_value;
});
</script>

<template>
  <div class="model-content" :class="{ boxShadow, borderRidus, 'model-title-com-dark': dark }">
    <modelTitle v-if="title" :title="title">
      <div class="model-title-slot">
        <px-button v-if="button" type="primary" size="small" plain @click="clickHandler">{{ button }}</px-button>
      </div>
    </modelTitle>
    <div class="model_chart model_chart_con">
      <wwtCarousel2 :autoplay="autoplay" :type="`${dark ? 'dark' : ''}`" />
      <div class="bg-purple">
        <div v-for="item in pcwPoints" :key="item.itemValue" class="bg-text">
          <div>{{ item.name }}</div>
          <div>{{ item.value }}Hz</div>
        </div>
        <!-- <div class="bg-value">{{ pcwPoint }}HZ</div> -->
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.model-content {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 16px;
  background-color: #fff;

  .model-title-slot {
    display: flex;
    gap: 16px;
    align-items: center;

    .right-text {
      font-weight: 600;
      line-height: 1;
      color: var(--px-color-primary);
    }

    .px-icon {
      cursor: pointer;
    }
  }

  .model_chart_con {
    display: flex;
    flex-flow: row nowrap;
    gap: 8px;
    justify-content: space-between;
    width: 100%;
    height: calc(100% - v-bind(title_height));

    .bg-purple {
      box-sizing: border-box;
      display: flex;
      flex-flow: column nowrap;
      gap: 8px;
      width: 10%;
      min-width: 116px;
      height: 100%;
      padding: 5px;
      overflow: auto;
      background-color: #ebecff;
      background-image: url("@/assets/svg/machine/beng.svg");
      background-repeat: no-repeat;
      background-position: right 5px bottom 5px;
      background-origin: content-box;
      border-radius: 4px;

      &::-webkit-scrollbar {
        display: none;
      }

      .bg-text {
        display: flex;
        flex-flow: row nowrap;
        gap: 8px;
        justify-content: space-between;
        font-size: 10px;
        white-space: nowrap;
      }

      .bg-value {
        font-size: 20px;
        font-weight: 600;
        color: #3b82f6;
      }
    }
  }
}

.boxShadow {
  box-shadow: 0 0 10px rgb(0 37 86 / 12%);
}

.borderRidus {
  border-radius: 4px;
}

.model-title-com-dark {
  color: #fff;
  background-color: #001e3b;
  border: 1px solid #83b2ff;
  box-shadow: inset 0 0 10px 0 #83b2ff;

  .title-text {
    color: #fff;
  }

  .bg-purple {
    background-color: #0e2b4f !important;
    background-image: url("@/assets/svg/machine/dark_beng.svg") !important;
  }

  :deep(.model-title-com) {
    border-color: #00c2ff !important;
  }
}
</style>
